import { defineComponent, computed, reactive, watch } from 'vue';
import { RouterLink, RouterView, useRoute } from 'vue-router';
import _ from 'lodash';
import { DoubleColumnsResize, WaterMark } from '@/../packages';
import { routes } from '@/router';
import styles from './App.module.less'


export default defineComponent({
    setup() {
        const menuList = computed(() => {
            return _.map(routes.filter(route => route?.component), item => {
                return {
                    label: item.name,
                    value: item.name,
                };
            });
        });

        const route = useRoute();

        const state = reactive({
            /**
             * @description menuKey
             * @type {string}
             */
            menuKey: undefined
        });

        watch(() => route, (value) => {
            state.menuKey = value.path.replace(/^\/(.*)/, "$1");
        }, {
            deep: true,
            immediate: true
        });

        /**
         * @description render for header
         * @returns {VirtualElement}
         */
        const headerRender = () => {
            return <header class={styles.header}>
                <section class={styles.title}>
                    <a href="https://gitee.com/is666a/my-vue3-components.git" target="_blank">
                        <span class={styles['title-content']}>My Web Components</span>
                    </a>
                </section>
            </header>;
        };

        /**
         * @description render for footer
         * @returns {VirtualElement}
         */
        const footerRender = () => {
            return <footer class={styles.footer}>
                <span>
                    CopyRight&copy;2022 <a href="https://www.zhihu.com/people/is666a" target="_blank">带只拖鞋去流浪</a>
                </span>
            </footer>;
        };

        /**
         * @description render for main
         * @returns {VirtualElement}
         */
        const mainRender = () => {
            const firstContent = () => (<nav class={styles.nav}>
                <section class={styles.menu}>
                    {
                        _.map(menuList.value, menu => {
                            return <div
                                class={[styles['menu-item'], {
                                    [styles['active-menu']]: state.menuKey === menu.value
                                }]}
                                onClick={() => state.menuKey = menu.value}>
                                <RouterLink to={menu.value} class={[styles.ellipsis]}>{menu.label}</RouterLink>
                            </div>
                        })
                    }
                </section>
            </nav>);

            const secondContent = () => (<div class={styles.content}>
                <RouterView />
            </div>);

            return <main class={styles.main}>
                <DoubleColumnsResize
                    firstSize={200}
                    secondMinSize={400}
                >
                    {{
                        firstContent,
                        secondContent,
                    }}
                </DoubleColumnsResize>
            </main>
        };

        /**
         * @description render for water-mark
         * @returns {VirtualElement}
         */
        const waterMarkRender = () => {
            return <WaterMark>
                <div
                    style={{
                        transform: `rotate(45deg)`,
                        'font-size': `1rem`,
                        opacity: `.1`,
                        height: `17rem`,
                        width: `17rem`,
                        display: `flex`,
                        justifyContent: `center`,
                        alignItems: `center`,
                    }}
                >
                    带只拖鞋去流浪&copy;2022
                </div>
            </WaterMark>
        };

        return () => (<div class={styles.container}>
            {headerRender()}
            {mainRender()}
            {footerRender()}
            {waterMarkRender()}
        </div>)
    },
})